body {
    background-color: #222831;
}
.content {
    width: 10rem;
}

.tool-title {
    -webkit-app-region: drag;
    display: flex;
    justify-content: space-between;
    height: 5%;
    background-color: #222831;
    font-size: 0.1563rem;
    &>div {
        -webkit-app-region: no-drag;
        line-height: 0.2604rem;
    }
    &>.box-set {
        display: flex;
        // width: 2.6042rem;
        &>div {
            // width: 0.5208rem;
            // 类容填充
            width: fit-content;
            padding: 0 0.0208rem;
        }
    };
    &>.box-title {
        width: 0.6771rem
    };
    &>.box-oprate {
        display: flex;
        width: 1.5625rem;
        &>div {
            width: 0.5208rem;
        };
    };
}

.menu-ishow {
    background-color: #505764;
    color: #FFC107;
}
.minute-ishow {
    display: none;
}
.tool-body {
    display: flex;
    height: 85%;
    background-color: #393e46;
    &>.box-options {
        display: flex;
        width: 4.1667rem;
        &>.menu {
            width: 1.0417rem;
            height: 4.5833rem;
            background-color: #051630;
            font-size: 0.1667rem;
            line-height: 0.4167rem;
        };
        &>.minute {
            width: 3.125rem;
            height: 4.5833rem;
            &>div>p {
                margin-bottom: 0.1042rem;
                border-bottom: 1px #000 solid;
                font-size: 0.1563rem;
                line-height: 0.3125rem;
            };
            &>div>div {
                display: flex;
                justify-content: space-evenly;
                flex-wrap: wrap;
                &>div {
                    position: relative;
                    width: 0.8333rem;
                    height: 1.0417rem;
                    border-radius: 2px;
                    box-shadow: 0px 5px 10px rgba(250, 244, 244, 0.2);
                    background-color: #051630;
                    &>input {
                        width: 0.1354rem;
                        height: 0.1354rem;
                        position: absolute;
                        top: 0.0521rem;
                        left: 0.0521rem;
                    };
                    &>label {
                        display: flex;
                        flex-direction: column;
                        height: 1.0417rem;
                        & .icon-img {
                            width: 0.8333rem;
                            height: 0.8333rem;
                            line-height: 0.8333rem;
                            &>.ico-size {
                                font-size: 0.3646rem
                            }
                        };
                        &>span {
                            font-size: 0.1042rem;
                            line-height: 0.2083rem
                        }
                    };
                    
                };
            };
            &>.minute-watermark>.watermark-title {
                line-height: 0.2813rem;
                &>input{
                    height: 0.2813rem;
                }
                &>label {
                    text-align: left;
                }
                &>.size {
                    width: 0.4167rem;
                }
                &>.color {
                    width: 0.4167rem
                }
            }
            
        }
    };
    &>.box-video {
        width: 5.8333rem;
        background-color: #051630;
        &>.monitor {
            width: 5.625rem;
            margin-top: 0.4167rem;
            margin-bottom: 0.1042rem;
            background-color: #fff
        }
    };
}

.start-ishow {
    display: none;
}
.micr-ishow {
    display: none;
}
.sys-ishow {
    display: none;
}
.tool-controls {
    display: flex;
    height: 10%;
    background-color: #222831;
    line-height: 0.5208rem;
    &>div>.ico-size{
        font-size: 0.2604rem;
    };
    &>div>.ban {
        color: #ff0000
    };
    &>.box-start {
        width: 0.5208rem;
    };
    &>.box-stop {
        width: 0.5208rem;
    };
    &>.box-pause {
        width: 0.5208rem;
    };
    &>.box-screen {
       width: 0.5208rem; 
    };
    &>.box-micr-audio {
        width: 1.0417rem;
    };
    &>.box-sys-audio {
        width: 1.0417rem;
    };
    &>.box-show {
        width: 0.5208rem;
    };
}

.load {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5);
    &> .loading_box {
        display: flex;
        width: 3.125rem;
        justify-content: space-around;
        // 循环
        @for $i from 1 through 5 {
            &> .item_box#{$i} {
                width: 0.3125rem;
                height: 0.3125rem;
                animation: load 1s linear infinite;
                animation-delay: $i * 0.25s * -1;
            }
        }
        &> div:nth-child(1) {
            background-color: #5290f9;
        }
        &> div:nth-child(2) {
            background-color: #ed44f9;
        }
        &> div:nth-child(3) {
            background-color: #4af9dc;
        }
        &> div:nth-child(4) {
            background-color: #94f940;
        }
        &> div:nth-child(5) {
            background-color: #f9a33f;
        }
    }
    
}

@keyframes load {
    25% {
        transform: translateY(25px)
    }
    50% {
        transform: translateY(0px)
    }
    75% {
        transform: translateY(-25px)
    }
    100% {
        transform: translateY(0px);
    }
}








@font-face {
    font-family: 'iconfont';
    src: url('./assets/iconfont/iconfont.woff2?t=1726422663236') format('woff2'),
         url('./assets/iconfont/iconfont.woff?t=1726422663236') format('woff'),
         url('./assets/iconfont/iconfont.ttf?t=1726422663236') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 0.1667rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}